<template>
  <view class="content-wrapper" :style="wrapperStyle">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'PublicContentLayout',
  props: {
    // 手动覆盖顶部留白（单位：px）
    paddingTop: { type: [Number, String], default: 0 },
    // 是否自动根据顶部导航高度进行留白
    autoPadding: { type: Boolean, default: true }
  },
  data() {
    return {
      // 自动计算的顶部留白（px）
      topOffset: 0
    }
  },
  computed: {
    wrapperStyle() {
      const base = Number(this.paddingTop) || 0;
      const offset = this.autoPadding ? this.topOffset : 0;
      const total = base + offset;
      return { paddingTop: total + 'px' };
    }
  },
  mounted() {
    if (this.autoPadding) {
      this.calculateTopOffset();
      if (typeof window !== 'undefined' && window.addEventListener) {
        window.addEventListener('resize', this.calculateTopOffset);
      }
    }
  },
  beforeDestroy() {
    if (typeof window !== 'undefined' && window.removeEventListener) {
      window.removeEventListener('resize', this.calculateTopOffset);
    }
  },
  methods: {
    calculateTopOffset() {
      if (typeof document !== 'undefined') {
        // 通过查询顶部导航的实际高度来确定留白
        const el = document.querySelector('.custom-navbar');
        const height = el ? el.offsetHeight : 60; // 默认备用高度
        this.topOffset = height;
      }
    }
  }
}
</script>

<style scoped>
.content-wrapper {
  min-height: 100vh;
  box-sizing: border-box;
}
</style> 